<html>
<head>
    <meta charset="utf-8">
    <title>{ms:global.name/}</title>
    <#include "head-file.htm" />
</head>
<body>
<div id="app" v-cloak>
    <#include "header.htm" />
    <div class="content">
        <!--新闻详情-start-->
        <div class="body">
            <div class="left">
                {ms:channel type='parent'}
                <span class="title"> ${field.typetitle} </span>
                {/ms:channel}
                <#assign typetitle=field.typetitle>
                <#if field.typeleaf>
                {ms:channel type='level'}
                <a href="{ms:global.url/}${field.typelink}"
                   class="<#if typetitle==field.typetitle>sub-title-sel<#else>sub-title</#if>"> ${field.typetitle} </a>
                {/ms:channel}
                <#else>
                {ms:channel type='son'}
                <a href="{ms:global.url/}${field.typelink}"
                   class="<#if typetitle==field.typetitle>sub-title-sel<#else>sub-title</#if>"> ${field.typetitle} </a>
                {/ms:channel}
            </#if>
        </div>
        <div class="right">
            <div class="ms-channel-path">
                <span class="ms-channel-path-label"> 当前位置： </span>
                <a href="/" class="ms-channel-path-index"> 首页 </a> {ms:channel type="path"}
                <i class="iconfont icon-youjiantou"></i>
                <a href="{ms:global.url/}${field.typelink}" class="ms-channel-path-link"> ${field.typetitle} </a>
                {/ms:channel}
            </div>
            <span class="big-title"> ${field.title} </span>
            <div class="news-date-hit">
                <span> 发布时间: </span>
                <span class="date"> ${field.date?date?string("yyyy-MM-dd")} </span>
                <span> 预览次数: </span>
                <span> ${field.hit} </span>
            </div>
            <div class="news-body">
                <span> ${field.content} </span>
            </div>
            <div class="news-pre">
                <span class="label"> 上一篇: </span>
                <#if pre.title?has_content>
                <a href="{ms:global.url/}${pre.link}"> ${pre.title} </a>
                <#else>
                已经没有了
            </#if>
            </div>
            <div class="news-next">
                <span class="label"> 下一篇: </span>
                <#if next.title?has_content>
                <a href="{ms:global.url/}${next.link}"> ${next.title} </a>
                <#else>
                已经没有了
                </#if>
            </div>
            <el-badge :value="Total" class="item">
                <el-button @click="save">点赞</el-button>
            </el-badge>

    </div>
</div>
<!--新闻详情-end-->
</div>
<#include "footer.htm" />
</div>
<script>
    var app = new Vue({
        el: '#app',
        watch: {},
        data: {
            collectionFrorm: {
                collectionDataTitle: '${field.title}',//文章标题
                dataId: '${field.id}',//文章id
                dataType: "cms" //业务类型
            },
            Total:0 // 点赞数
        },
        methods: {
            switchShow: function (arr) {
                var that = this
                arr.forEach(function (x) {
                    let e = that.$el.querySelector("#key_" + x)
                    if (e) {
                        e.style.display = e.style.display == 'none' ? 'flex' : 'none'
                    }
                })
            },
            // 点赞关注(一个账号只允许关注一次)
            save: function() {
                var that = this;
                //用户-关注接口
                ms.http.post("/people/attention/collectionLog/save.do", that.collectionFrorm).then(function (data) {
                    if (data.result) {
                        that.$message.success("点赞成功!");
                    }
                })
                that.likeTotal()
            },
            // 点赞数
            likeTotal: function (){
                var that = this;
                //用户-关注接口
                ms.http.post("/attention/collection/list", that.collectionFrorm).then(function (data) {
                    that.Total = data.data.rows[0].dataCount
                })
            }
        },
        created() {
            this.likeTotal()
        }
    })
</script>
<style>
    body {
        background-color: #fff;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;
        moz-box-sizing: border-box;
        webkit-box-sizing: border-box;
    }

    .content {
        align-items: flex-start;
        flex-direction: row;
        display: flex;
        padding-right: 0px;
        box-sizing: border-box;
        justify-content: center;
        padding-bottom: 0px;
        flex-wrap: nowrap;
        width: 100%;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-left: 0px;
        margin-top: 0px;
    }

    .content .body {
        padding-bottom: 20px;
        flex-wrap: nowrap;
        flex-direction: row;
        display: flex;
        padding-right: 0px;
        width: 1200px;
        box-sizing: border-box;
        margin-bottom: 0px;
        padding-top: 20px;
        padding-left: 0px;
        margin-top: 0px;
    }

    .content .body .left {
        padding-bottom: 0px;
        flex-wrap: nowrap;
        flex-direction: column;
        display: flex;
        padding-right: 0px;
        width: 200px;
        box-sizing: border-box;
        padding-top: 0px;
        padding-left: 0px;
        margin-top: 0px;
        height: 100%;
    }

    .content .body .left .title {
        border-bottom-color: #C0C4CC;
        color: #C0C4CC;
        flex-direction: row;
        word-wrap: break-word;
        display: inline-block;
        font-size: 16PX;
        border-bottom-style: dashed;
        padding-top: 10px;
        border-bottom-width: 1px;
        padding-left: 10px;
        margin-top: 0px;
        height: 40px;
    }

    .content .body .left .sub-title-sel {
        background-color: #F2F6FC;
        color: #409EFF;
        flex-direction: row;
        word-wrap: break-word;
        display: inline-block;
        font-size: 16PX;
        padding-top: 10px;
        padding-left: 10px;
        margin-top: 2px;
        height: 40px;
    }

    .content .body .left .sub-title {
        color: #5F5F5F;
        flex-direction: row;
        word-wrap: break-word;
        display: inline-block;
        font-size: 16PX;
        padding-top: 10px;
        padding-left: 10px;
        margin-top: 0px;
        height: 40px;
    }

    .content .body .right {
        align-items: center;
        flex-direction: column;
        display: flex;
        padding-right: 0px;
        box-sizing: border-box;
        justify-content: center;
        padding-bottom: 0px;
        flex-wrap: nowrap;
        width: 1000px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-left: 20px;
        margin-top: 0px;
        height: 100%;
    }

    .content .body .right .ms-channel-path {
        align-items: center;
        flex-direction: row;
        display: flex;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 0px;
        flex-wrap: nowrap;
        width: 100%;
        margin-bottom: 10px;
        padding-top: 0px;
        margin-top: 10px;
        height: 30px;
    }

    .content .body .right .ms-channel-path span {
        color: #909399;
        flex-direction: row;
        word-wrap: break-word;
        display: inline-block;
        font-size: 16PX;
    }

    .content .body .right .ms-channel-path .ms-channel-path-index {
        cursor: pointer;
        color: #000;
        font-size: 16PX;
        text-decoration: none;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .content .body .right .ms-channel-path > i {
    }

    .content .body .right .ms-channel-path .ms-channel-path-link {
        cursor: pointer;
        color: #000;
        font-size: 16PX;
        text-decoration: none;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .content .body .right .big-title {
        text-align: center;
        flex-direction: row;
        word-wrap: break-word;
        display: inline-block;
        font-size: 22PX;
        padding-left: 0px;
    }

    .content .body .right .news-date-hit {
        margin-right: 0px;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        display: flex;
        width: 100%;
        box-sizing: border-box;
        padding-left: 0px;
        justify-content: center;
        height: 40px;
    }

    .content .body .right .news-date-hit span {
        color: #909399;
        flex-direction: row;
        word-wrap: break-word;
        display: inline-block;
        font-size: 16PX;
    }

    .content .body .right .news-date-hit .date {
        margin-right: 20px;
        color: #909399;
        flex-direction: row;
        word-wrap: break-word;
        display: inline-block;
        font-size: 16PX;
        margin-left: 0px;
    }

    .content .body .right .news-body {
        margin-right: 0px;
        padding-bottom: 0px;
        flex-wrap: nowrap;
        flex-direction: column;
        display: flex;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 0px;
        padding-top: 0px;
        margin-top: 0px;
        margin-left: 0px;
    }

    .content .body .right .news-body span {
        flex-direction: row;
        word-wrap: break-word;
        display: inline-block;
        font-size: 14px;
    }

    .content .body .right .news-pre {
        margin-right: 0px;
        padding-bottom: 0px;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        display: flex;
        width: 100%;
        box-sizing: border-box;
        padding-top: 0px;
        justify-content: flex-start;
        margin-left: 0px;
        height: 40px;
    }

    .content .body .right .news-pre .label {
        margin-right: 10px;
        color: #909399;
        flex-direction: row;
        word-wrap: break-word;
        display: inline-block;
        font-size: 16PX;
        padding-top: 0px;
    }

    .content .body .right .news-pre a {
        margin-right: 0px;
        flex-direction: row;
        word-wrap: break-word;
        display: inline-block;
        font-size: 16PX;
        padding-top: 0px;
    }

    .content .body .right .news-next {
        margin-right: 0px;
        padding-bottom: 0px;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        display: flex;
        width: 100%;
        box-sizing: border-box;
        padding-top: 0px;
        justify-content: flex-start;
        margin-left: 0px;
        height: 40px;
    }

    .content .body .right .news-next .label {
        margin-right: 10px;
        color: #909399;
        flex-direction: row;
        word-wrap: break-word;
        display: inline-block;
        font-size: 16PX;
        padding-top: 0px;
    }

    .content .body .right .news-next a {
        margin-right: 0px;
        flex-direction: row;
        word-wrap: break-word;
        display: inline-block;
        font-size: 16PX;
        padding-top: 0px;
    }

    @media (max-width: 768px) {
        .content {
            align-items: center;
            flex-direction: row;
            display: flex;
            padding-right: 0px;
            box-sizing: border-box;
            justify-content: center;
            padding-bottom: 0px;
            flex-wrap: nowrap;
            width: 100%;
            margin-bottom: 0px;
            padding-top: 0px;
            padding-left: 0px;
            margin-top: 0px;
        }

        .content .body {
            padding-bottom: 20px;
            align-items: center;
            flex-wrap: wrap;
            flex-direction: row;
            display: flex;
            padding-right: 0px;
            width: 100%;
            box-sizing: border-box;
            padding-top: 20px;
            padding-left: 0px;
            justify-content: center;
        }

        .content .body .left {
            padding-bottom: 0px;
            flex-wrap: nowrap;
            flex-direction: column;
            display: flex;
            padding-right: 0px;
            width: 90%;
            box-sizing: border-box;
            padding-top: 0px;
            padding-left: 0px;
            margin-top: 0px;
            height: 100%;
        }

        .content .body .left .sub-title-sel {
            background-color: #F2F6FC;
            color: #409EFF;
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 16PX;
            padding-top: 10px;
            padding-left: 10px;
            margin-top: 2px;
            height: 40px;
        }

        .content .body .left .sub-title {
            color: #5F5F5F;
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 16PX;
            padding-top: 10px;
            padding-left: 10px;
            margin-top: 0px;
            height: 40px;
        }

        .content .body .right {
            padding-bottom: 0px;
            flex-wrap: nowrap;
            flex-direction: column;
            display: flex;
            padding-right: 0px;
            width: 90%;
            margin-bottom: 0px;
            box-sizing: border-box;
            padding-top: 0px;
            padding-left: 0px;
            margin-top: 0px;
        }

        .content .body .right .ms-channel-path {
            margin-right: auto;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            display: flex;
            width: 100%;
            margin-bottom: 10px;
            box-sizing: border-box;
            margin-top: 10px;
            height: 30px;
            margin-left: auto;
        }

        .content .body .right .ms-channel-path span {
            color: #5F5F5F;
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 16PX;
            padding-top: 0px;
            padding-left: 0px;
        }

        .content .body .right .ms-channel-path .ms-channel-path-index {
            cursor: pointer;
            color: #000;
            font-size: 16PX;
            text-decoration: none;
            margin-bottom: 0px;
            margin-top: 0px;
        }

        .content .body .right .ms-channel-path .ms-channel-path-link {
            cursor: pointer;
            color: #000;
            font-size: 16PX;
            text-decoration: none;
            margin-bottom: 0px;
            margin-top: 0px;
        }

        .content .body .right .big-title {
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 22PX;
            padding-left: 0px;
        }

        .content .body .right .news-date-hit {
            margin-right: 0px;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            display: flex;
            width: 100%;
            box-sizing: border-box;
            padding-left: 0px;
            justify-content: center;
            height: 40px;
        }

        .content .body .right .news-date-hit span {
            color: #909399;
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 16PX;
        }

        .content .body .right .news-date-hit .date {
            margin-right: 20px;
            color: #909399;
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 16PX;
            margin-left: 0px;
        }

        .content .body .right .news-body {
            margin-right: 0px;
            padding-bottom: 0px;
            flex-wrap: nowrap;
            flex-direction: column;
            display: flex;
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 0px;
            padding-top: 0px;
            margin-top: 0px;
            height: 300px;
            margin-left: 0px;
            height: unset;
        }

        .content .body .right .news-body span {
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 14px;
        }

        .content .body .right .news-pre {
            margin-right: 0px;
            padding-bottom: 0px;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            display: flex;
            width: 100%;
            box-sizing: border-box;
            padding-top: 0px;
            justify-content: flex-start;
            margin-left: 0px;
            height: 40px;
        }

        .content .body .right .news-pre .label {
            margin-right: 10px;
            color: #909399;
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 16PX;
            padding-top: 0px;
        }

        .content .body .right .news-pre a {
            margin-right: 0px;
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 16PX;
            padding-top: 0px;
        }

        .content .body .right .news-next {
            margin-right: 0px;
            padding-bottom: 0px;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            display: flex;
            width: 100%;
            box-sizing: border-box;
            padding-top: 0px;
            justify-content: flex-start;
            margin-left: 0px;
            height: 40px;
        }

        .content .body .right .news-next .label {
            margin-right: 10px;
            color: #909399;
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 16PX;
            padding-top: 0px;
        }

        .content .body .right .news-next a {
            margin-right: 0px;
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 16PX;
            padding-top: 0px;
        }

    }</style>
</body>
</html>